<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>术语</title>
        <style type="text/css">

            p {
                margin: 0;
                color: blue;
            }

            .container { 
                /* 使元素称为弹性容器 */
                display: flex;
                border: 1px solid blue ;
            }

            .item:nth-child(2n+1) { background: #dfdfdf; }
            .item:nth-child(2n) { background: #ff0; }

            .first { 
                /* 在 弹性容器 中通过 flex-direction 设置 主轴的方向 */
                flex-direction: row;
                height: 100px;
                margin-bottom: 25px;
            }
            .first>.item { width: 300px; }

            .second {
                /* 在 弹性容器 中通过 flex-direction 设置 主轴的方向 */
                flex-direction: column-reverse;
                height: 300px;
            }
            .second>.item {
                height: 50px;
            }

        </style>
    </head>
    <body>

        <h3>术语</h3>
        <dl>
            <dt>弹性容器(Flex Container)</dt>
            <dd>在弹性布局中， display 取值为 flex 或 inline-flex 的元素就是弹性容器</dd>
            <dt>弹性项目(Flex Item)</dt>
            <dd>弹性容器的直接子元素就是弹性项目(也称作柔性项目)</dd>
            <dt>主轴(Main Axis)</dt>
            <dd>主轴是由弹性容器中弹性方向属性(flex-direction)所定义的的</dd>
            <dt>交叉轴(Cross Axis)</dt>
            <dd>弹性容器的交叉轴和主轴垂直</dd>
        </dl>

        <p>以水平方向从左到右为主轴(Main Axis)、以垂直方向从上到下为交叉轴(Cross Axis)</p>
        <div class="container first">
            <div class="item">天</div>
            <div class="item">地</div>
            <div class="item">玄</div>
            <div class="item">黄</div>
        </div>

        <p>以垂直方向从下到上为主轴(Main Axis)、以水平方向从左到右为交叉轴(Cross Axis)</p>
        <div class="container second">
            <div class="item">天</div>
            <div class="item">地</div>
            <div class="item">玄</div>
            <div class="item">黄</div>
        </div>

    </body>
</html>